<template>
  <div>
    <h2 style="background-color:bisque;width: 150px;">通用合同审批</h2><br>
    合同标题：<el-input v-model="form.contracTitle" style="width: 250px;height: 40px;"
    placeholder="请输入合同标题" clearable />
  对方单位：<el-input v-model="form.opponentUnit" style="width: 250px;height: 40px;"
    placeholder="请输入对方单位" clearable />
  对方负责人：<el-input v-model="form.opponentName" style="width: 250px;height: 40px;"
    placeholder="请输入对方负责人" clearable /> <br> <br>&nbsp;&nbsp;
  经办人：<el-input v-model="form.handlingName" style="width: 250px;height: 40px;"
    placeholder="请输入经办人" clearable />
  签订时间：<el-date-picker v-model="form.signedTime" style="width: 250px;height: 40px;" 
    placeholder="请输入签订时间" type="date" value-format="YYYY-MM-DD" clearable />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="GetAll">查询</el-button>
  <el-button @click="Reset">重置</el-button>
  <br><br> 
  <!-- 审批状态 -->
  <el-radio-group v-model="form.approval" size="large" @Change="GetAll" style="width: 500px;background-color:beige ;">
      <el-radio-button label="全部" value='' style="width: 150px;"/>
      <el-radio-button label="待审批" value='1' style="width: 150px;"/>
      <el-radio-button label="已审批" value='2' />
  </el-radio-group><br>
  <el-scrollbar>
  <div>
    <el-table :data="tableData" border style="width: 1500px">
      <el-table-column type="selection" width="55" />
    <el-table-column prop="contractNumber" label="合同编号" align="center" width="150"/>
    <el-table-column prop="contracTitle" label="合同标题" align="center" width="120"/>
    <el-table-column prop="opponentUnit" label="对方单位" align="center" width="180"/>
    <el-table-column prop="opponentName" label="对方负责人" align="center" width="120"/>
    <el-table-column prop="opponenType" label="合同类别" align="center" width="120"/>
    <el-table-column prop="signedTime" label="签订日期" align="center" width="120">
      <template v-slot="scope">
        <span>{{ (scope.row.signedTime).substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="handlingName" label="经办人" align="center" width="80"/>
    <el-table-column prop="createDate" label="创建时间" align="center" width="150">
      <template v-slot="scope">
        <span>
          {{ (scope.row.createDate).substring(0,10) +' '+ (scope.row.createDate).substring(11,16) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="状态" align="center" width="80">
      <template v-slot="scope">
        <span v-if="scope.row.contractStatus==1">待审批</span>
        <span v-if="scope.row.contractStatus==2">已通过</span>
        <span v-if="scope.row.contractStatus==3">已拒绝</span>
      </template>
    </el-table-column>
    <el-table-column prop="statusPerson" label="审批人" align="center" width="80"/>
    <el-table-column label="操作" fixed="right"  min-width="150" align="center">
      <template v-slot="scope">
        <el-button type="primary" text style="width: 15px;" @click="Check(scope.row.contractId,scope.row.contractStatus)">查看</el-button>
        <el-button type="primary" text style="width: 15px;":disabled="scope.row.contractStatus>1"
         @click="Through(scope.row.contractId,2)">通过</el-button>
        <el-button type="primary" text style="width: 15px;" :disabled="scope.row.contractStatus>1"
        @click="Through(scope.row.contractId,3)">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div><br>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[4, 8, 15]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.pageRoot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-scrollbar>    
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
const form=reactive({
  pageIndex:1,
  pageSize:4,
  classify:1,
  pageRoot:0,
  pageCount:0,
  contracTitle:'',
  opponentUnit:'',
  opponentName:'',
  handlingName:'',
  signedTime:'',
  approval:''
})
onMounted(()=>{
  GetAll()
})
const tableData = ref([])
//通用合同审批列表
const GetAll=()=>{
  axios.get('ContractRead/api/ReadContract/ApprovalGetAll', {
    params: {
      pageIndex:form.pageIndex,
      pageSize:form.pageSize,
      classify:form.classify,
      contracTitle:form.contracTitle,
      opponentUnit:form.opponentUnit,
      opponentName:form.opponentName,
      handlingName:form.handlingName,
      signedTime:form.signedTime,
      approval:form.approval
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value=ret.data.data.plist
    form.pageRoot=ret.data.data.pageRoot
    form.pageCount=ret.data.data.pageCount
  })
}
//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  GetAll()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  GetAll()
}
//通过/拒绝
const Through=(contractId:number,contractStatus:any)=>{
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId:contractId,
      contractStatus:contractStatus
    }
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data.data==1){
      ElMessage.success('审批成功')
      GetAll()
    }else{
      ElMessage.error('审批失败')
    }  
  })
}
//查看
const Check=(contractId:any,contractStatus:any)=>{
  if(contractStatus==1){
    router.push({
      path:'/OpponentView',
      query:{
        contractId:contractId
      }
    })
  }
  if(contractStatus>1){
    router.push({
      path:'/OpponentPassView',
      query:{
        contractId:contractId,
        contractStatus:contractStatus
      }
    })
  }
}
//重置
const Reset=()=>{
  form.contracTitle='',
  form.opponentUnit='',
  form.opponentName='',
  form.handlingName='',
  form.signedTime='',
  form.approval=''
  GetAll()
}

</script>

<style scoped>

</style>